<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css"></link>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div class="container" id="app">
    <div class="row">
        <div class="col-md-pull-10 col-sm-pull-10 col-lg-pull-10 ">
            <button class="btn btn-primary" @click="add()">添加</button>
        </div>
        <div class="col-md-9">
            名称:<input type="text" v-model="food.FNAME">
            <button type="button" @click="queryByLike()">查询</button>
        </div>
    </div>
    <table class="table table-hover">
        <tr>
            <td>图片</td>
            <td>名称</td>
            <td>时间</td>
            <td>操作</td>
        </tr>
        <tr v-for="f in foods">

            <td v-text="f.image"></td>
            <td v-text="f.fname"></td>
            <td v-text="f.fdate"></td>
            <td >
                <button class="btn btn-primary" @click="del(f.fid)">
                    <span class="glyphicon glyphicon-remove"></span>
                    删除
                </button>
                <button class="btn btn-primary" @click="update(f)">
                    <span class="glyphicon glyphicon-pencil"></span>
                    修改
                </button>

            </td>
        </tr>

        <!--分页-->
        <tfoot>
        <tr>
            <td colspan="4"> <!--分页-->
                <!--显示分页信息-->
                <div class="row">
                    <!--文字信息-->
                    <div class="col-md-6">
                        当前第 <input name="startPage"  :value="pageInfo.pageNum"  style="width: 20px"/>/{{pageInfo.pages}}页.一共 {{pageInfo.total}}条记录
                    </div>
                    <!--点击分页-->
                    <div class="col-md-6">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li><a href="javascript:;" @click="query(1)">首页</a></li>
                                <!--上一页-->
                                <li>
                                    <a :class="{'hidden':!pageInfo.hasPreviousPage}" href="javascript:;" @click="query(pageInfo.pageNum-1)" aria-label="Previous">
                                        <span aria-hidden="true">«</span>
                                    </a>
                                </li>
                                <!--循环遍历连续显示的页面，若是当前页就高亮显示，并且没有链接-->
                                <li v-for="page_num in pageInfo.navigatepageNums"   :class="{'active':page_num == pageInfo.pageNum}" >
                                    <a href="javascript:;"   :class="{'hidden':page_num == pageInfo.pageNum}" @click="query(page_num)">{{page_num}}</a>
                                    <a :class="{'hidden':page_num != pageInfo.pageNum}" href="javascript:;" @click="query(page_num)"  >{{page_num}}</a>
                                </li>
                                <!--下一页-->
                                <li>
                                    <a :class="{'hidden':!pageInfo.hasNextPage}" href="javascript:;" @click="query(pageInfo.pageNum+1)"
                                       aria-label="Next" >
                                        <span aria-hidden="true">»</span>
                                    </a>
                                </li>
                                <li><a href="javascript:;" @click="query(pageInfo.pages-0)">尾页</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <!--分页结束--></td>
        </tr>
        </tfoot>

    </table>
    <div>
        <!--层开始---------------------------------------- -->
        <div   class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">添加</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label   class="control-label">图片</label>
                                <input type="file" class="form-control"  @change="getfile($event)" >
                            </div>
                            <div class="form-group">
                                <label   class="control-label">名称</label>
                                <input class="form-control" v-model="food.fname"></input>
                            </div>
                            <div class="form-group">
                                <label   class="control-label">时间</label>
                                <input type="date" class="form-control"  v-model="food.fdate" >
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" @click="addfood()">添加</button>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <!--添加层结束--->
    <!--修改层开始----- -->
    <div   class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel2">修改</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label   class="control-label">图片</label>
                            <input type="file" class="form-control"  @change="getfile($event)" >
                        </div>
                        <div class="form-group">
                            <label   class="control-label">名称</label>
                            <input class="form-control" v-model="food.fname"/>
                        </div>
                        <div class="form-group">
                            <label   class="control-label">时间</label>
                            <input type="date" class="form-control"  >
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" @click="update2()">修改</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--层结束---------------------------------------- -->



</div>
<!--
     $.getJSON("/FOOD/query",{},function(json){
            if(json.code==200){
                app.foods=json.data.list;

            }
        });
-->
<script>

    function load(){

        $.getJSON("/Food/queryPage",{},function(json){

            if(json.code==200){
                app.pageInfo=json.data.pageInfo;
                app.foods=json.data.pageInfo.list;
            }
        });
    }

    var app;
    app = new Vue({
        el: "#app",
        data: {
            foods: '',
            food: {
                fid:'',
                fname: '',
                image: '',
                fdate: '',
                pageNum:''
            },
            pageInfo:'',
            files:''  //上传的文件集合
        }, methods: {
            del(id) {

                $.getJSON("/FOOD/delById/" + id, {}, function (json) {

                    if (json.code == 200) {
                        load();
                    }
                });
            },
            add() {
                $('#exampleModal').modal("show")
            },

            addfood() {

                // $.getJSON("/FOOD/save", this.food, function (json) {
                //     $('#exampleModal').modal("hide");
                //     load();
                // })
                let fdate=new FormData;///包含文件的数据对象
                fdate.append("file",this.files[0]);
                for(let f in this.food){
                    if (this.food[f]!=null && this.food[f]!=''){
                        fdate.append(f,this.food[f])
                    }
                }
                $.ajax({
                    url: "/Food/uploadfood",
                    type: 'POST',
                    cache: false,
                    data: fdate,
                    processData: false,   //文件上传
                    contentType: false,
                    dataType:"json", //回调类型
                    beforeSend: function(){
                        //上传之前你想干嘛
                    },
                    success : function(json) {
                        if(json.code==200) {
                            alert("成功")
                            load();
                            $("#exampleModal").modal('hide'); //关闭层
                        }else{
                            //什么提示
                            alert("错误");
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        //上传异常给一个什么意思
                        alert("错误2");
                    },
                });


            },

            //update(id) {

                //location = "update.html?id=" + id
            //},

            update(f){
                //location="update.html?id="+id
                $('#exampleModal2').modal("show");
                app.food=f;


            },
            update2(){

                $.ajax({
                    type:"put",
                    datatype:"json",
                    url:"/FOOD/update",
                    data:app.food,
                    success:function (json) {
                        $("#exampleModal2").modal('hide'); //关闭层
                        load();
                    }
                });
            }
            ,


            query(num) {
                $.getJSON("/Food/queryPage",{'pageNum':num},function(json){
                    if(json.code==200){
                        app.pageInfo=json.data.pageInfo;
                        app.foods=json.data.pageInfo.list;
                    }
                });
            },
            //文件选择以后触发 下的getfile方法,
            getfile(event){ //获得上传文件的js对象
                this.files=event.target.files;

            },

            //模糊查询
            queryByLike(){
                $.getJSON("/Food/queryPage",this.food,function(json){
                    if(json.code==200){
                        app.pageInfo=json.data.pageInfo;
                        app.foods=json.data.pageInfo.list;
                    }
                });
            }

        },
        created() {
            load();
        }
    });

</script>
</body>
</html>